<template>

	<view class="buttons_list">
		<view class="button_item" v-for="(item,index) in buttonList" :key="item.id"   @click="navItemClick(item.id)">

			<button :class="[item.connected == 1 ? 'default':'warn',item.connected == 1 ? 'aa':'bb', 'cc']">{{item.name}}</button>
			
		</view>
	</view>
</template>

<script>

	export default {
			props: ['buttonList'],
			
			methods:{
				navItemClick (id) {
					console.log('jsdkjfskdfjksdfkdsjf',id)
					this.$emit('itemClick',id)
				}
			}
		}
</script>

<style lang="scss">
.buttons_list{
				padding: 0 15rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.button_item{
					background: #fff;
					width: 355rpx;
					margin: 10rpx 0;
					padding: 15rpx;
					box-sizing: border-box;
				}
			}
			.aa{
				
		
			}
			.bb{
		
		
			}
			.cc{
				color: #FFFFFF;
			}
			.default{
				background-color: $uni-color-primary;
			color: #FFFFFF;
			}
			.warn{
				background-color: $uni-color-warning;
			color: #FFFFFF;
			}
</style>
